<template>
  <div>
    <n-modal v-model:show="showModal" :show-icon="false"  preset="dialog" title="修改密码" @close="closePass">
      <n-form
        ref="passFormRef"
        label-placement="left"
        size="large"
        :model="form"
        :rules="mobileFormRules"
      >
        <n-form-item path="oldPasswd">
          <n-input
            v-model:value="form.oldPasswd"
            type="password"
            show-password-toggle
            placeholder="请输入原密码"
          >
            <template #prefix>
              <n-icon size="18" color="#808695">
                <LockClosedOutline />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="password">
          <n-input
            v-model:value="form.password"
            type="password"
            show-password-toggle
            placeholder="请输入密码"
          >
            <template #prefix>
              <n-icon size="18" color="#808695">
                <LockClosedOutline />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="confirmPass">
          <n-input
            v-model:value="form.confirmPass"
            type="password"
            show-password-toggle
            placeholder="请再次输入密码"
          >
            <template #prefix>
              <n-icon size="18" color="#808695">
                <LockClosedOutline />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
      </n-form>
      <template #action>
        <n-space>
          <n-button @click="()=>(showModal = false)">取消</n-button>
          <n-button type="info" @loading="submitLoading" @click="submitPass">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import {defineComponent,ref,reactive} from 'vue'
import { PersonOutline, LockClosedOutline, ArrowBackOutline,MailOutline } from '@vicons/ionicons5';
import { useMessage,useDialog } from 'naive-ui';
import {checkPassword,updatePassword} from "@/api/system/user";
import {TABS_ROUTES} from "@/store/mutation-types";
import {useUserStore} from "@/store/modules/user";
import { useRouter,useRoute } from 'vue-router';
export default defineComponent({
  name: "edit-password",
  components:{
    PersonOutline,
    LockClosedOutline,
    MailOutline,
    ArrowBackOutline
  },
  setup(){
    const showModal=ref(false);
    const form=reactive({
      password:'',
      confirmPass:'',
      oldPasswd:'',
    });
    const message=useMessage();
    const dialog=useDialog();
    const passFormRef=ref();
    const submitLoading=ref(false);
    const userStore = useUserStore();
    const router = useRouter();
    const route = useRoute();
    const mobileFormRules={
      oldPasswd:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入原密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else{
              checkPassword({password:value}).then(res=>{
                if(!res){
                  reject(Error('原密码不正确'))
                }else{
                  resolve()
                }
              })
            }
          })
        }
      },
      password:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else if(value==form.oldPasswd){
              reject(Error('新密码不能和原密码一样'))
            }else{
              resolve()
            }
          })
        }
      },
      confirmPass:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请再次输入密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else if(form.password!=value){
              reject(Error('两次输入的密码不一致'))
            }else{
              resolve()
            }
          })
        }
      }
    };
    const submitPass=()=>{
      passFormRef.value.validate((errors)=>{
        if(!errors){
          submitLoading.value=true;
          updatePassword(form).then(res=>{
            if(res){
              submitLoading.value=false;
              dialog.success({
                title: '提示',
                content: '修改成功，请重新登录.',
                positiveText: '确定',
                onPositiveClick: () => {
                  userStore.logout().then(() => {
                    localStorage.removeItem(TABS_ROUTES);
                    router
                      .replace({
                        name: 'Login',
                        query: {
                          redirect: route.fullPath,
                        },
                      })
                      .finally(() => location.reload());
                  });
                  closePass();
                }
              })
            }
          })
        }
      })
    };
    const closePass=()=>{
       showModal.value=false;
        Object.keys(form.value).forEach((key)=>{
         form.value[key]=null;
       })
    }
    return {
      showModal,
      form,
      mobileFormRules,
      passFormRef,
      submitLoading,
      submitPass,
      closePass
    }
  }
})
</script>

<style scoped>

</style>
